<template>
  <div class="scrollbar-wrapper">
    <div class="scrollbar-wrapper-top"></div>
    <div class="scrollbar-wrapper-bottom">
      <el-button type="primary" icon="el-icon-plus" @click="$router.push('/')" circle></el-button>
    </div>
    <el-aside class="Menu" width="217px">
      <ul class="Menu_list">
        <template v-for="(item, key) in menus">
          <li @click="toggleOpenStatus(key)" class="Menu_item"
            v-if="!item.children||item.children.length === 0"  :key="key">
            <nuxt-link :to="item.path" active-class="Menu_item_open" class="Menu_item_title">
              <i class="Menu_icon"></i>
              <span class="Menu_name">{{item.name}}</span>
            </nuxt-link>
          </li>
          <li v-if="item.children&&item.children.length > 0" :key="key" class="Menu_item_box">
            <div @click="toggleOpenStatus(key)" class="Menu_item">
              <div class="Menu_item_title" :class="{'Menu_item_open': $route.path.indexOf(item.path)>-1}">
                <i class="Menu_icon"></i>
                <span class="Menu_name">{{item.name}}</span>
              </div>
            </div>
            <ul class="Menu_sub_list" :style="{height: item.isOpen ? item.children.length * 57 + 'px' : 0}">
              <li class="Menu_item" v-for="(subitem, index) in item.children" :key="index">
                <nuxt-link
                exact-active-class="Menu_item_active"
                class="Menu_item_title"
                :to="subitem.path">{{subitem.name}}</nuxt-link>
              </li>
            </ul>
          </li>
        </template>
      </ul>
    </el-aside>
  </div>
</template>

<script>
  export default {
    methods: {
      toggleOpenStatus(key) {
        const item = this.menus[key]
        item.isOpen = !item.isOpen
        if (item.children.length === 0) return
        let isInclude = false
        item.children.map(route => {
          if (this.$route.path == route.path) {
            return isInclude = true
          }
        })
        if (isInclude) return
        this.$router.push(item.children[0].path)
      }
    },
    data() {
      return {
        menus: [
          {
            name: '订单管理',
            path: '/order/',
            children: [],
            isOpen: false,
            isActive: false
          },
          {
            name: '商品管理',
            path: '/goods',
            children: [
              {
                name: '货架',
                path: '/goods/goodsList',
                isActive: false
              },
              {
                name: '添加商品',
                path: '/goods/addGoods/0',
                isActive: false
              },
            ],
            isOpen: false,
            isActive: false
          },
          {
            name: '活动管理',
            path: '/active',
            children: [
              {
                name: '活动列表',
                path: '/active/activeList',
                isActive: false
              },
              {
                name: '添加活动',
                path: '/active/addActive/0',
                isActive: false
              },
            ],
            isOpen: false,
            isActive: false
          },
          {
            name: '服务管理',
            path: '/service/',
            children: [],
            isOpen: false,
            isActive: false
          },
           {
            name: '财务收支',
            path: '/financial',
            children: [
              {
                name: '财务数据',
                path: '/financial/financialData',
                isActive: false
              },
              {
                name: '商品数据',
                path: '/financial/financialProductData',
                isActive: false
              },
               {
                name: '客户数据',
                path: '/financial/financialCustomerData',
                isActive: false
              },
            ],
            isOpen: false,
            isActive: false
          },
           {
            name: '店铺分类',
            path: '/shopSort/',
            children: [],
            isOpen: false,
            isActive: false
          },
          {
            name: '权限管理',
            path: '/permission',
            children: [
              {
                name: '编辑用户',
                path: '/permission',
                isActive: false
              },
              {
                name: '用户组权限',
                path: '/permission/group',
                isActive: false
              }
            ],
            isOpen: true,
            isActive: false
          },
          {
            name: '新闻管理',
            path: '/news',
            children: [
              {
                name: '新闻列表',
                path: '/news/newslist',
                isActive: false
              },
              {
                name: '新闻添加',
                path: '/news/newsadd',
                isActive: false
              },
              {
                name: '新闻详情',
                path: '/news/newsdetail/:id',
                isActive: false
              }
            ],
            isOpen: true,
            isActive: false
          }
        ]
      }
    },
  }
</script>

<style lang="scss" scoped>
.scrollbar-wrapper {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  height: 100%;
  & /deep/ {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
.scrollbar-wrapper-top {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
}
.scrollbar-wrapper-bottom {
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  text-align: center;
  padding-top: 10px;
}
.Menu {
  padding-left: 27px;
  padding-right: 20px;
  height: 100%;
  user-select: none;
  overflow-y: auto;
  &_list {
    list-style: none;
    padding-left: 0;
    width: 153px;
  }
  &_item {
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    &_title {
      display: block;
      height: 33px;
      line-height: 33px;
      padding-left: 15px;
      border-radius: 16px;
      transition: all 500ms;
      color: #333856;
      font-size: 16px;
    }
    &_active {
      color: #409EFF;
      .Menu_icon {
        border-color: #409EFF;
      }
    }
    &_open {
      color: #409EFF;
      background-color: #d9e9fc;
      .Menu_icon {
        border-color: #409EFF;
      }
    }
  }
  &_sub_list {
    list-style: none;
    padding-left: 37px;
    transition: height 600ms;
    overflow: hidden;
  }
  &_icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 3px solid #333856;
    vertical-align: middle;
    border-radius: 50%;
    transition: border-color 500ms;
    vertical-align: middle;
  }
  &_name {
    display: inline-block;
    margin-left: 25px;
    vertical-align: middle;
  }
}
</style>
